<!--
 * @Author: wang cong wangc9832@163.com
 * @Date: 2023-07-15 18:26:33
 * @LastEditors: wang cong wangc9832@163.com
 * @LastEditTime: 2024-02-23 16:34:48
 * @FilePath: /ams_kt_front/src/components/Form/src/components/NumberBetween.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <InputGroup compact class="number-between">
    <InputNumber
      :placeholder="placeholder[0]"
      v-model:value="min"
      :max="max ? max : undefined"
      @change="handleInput"
    />
    <div>~</div>
    <InputNumber
      :placeholder="placeholder[1]"
      v-model:value="max"
      :min="min ? min : undefined"
      @change="handleInput"
    />
  </InputGroup>
</template>
<script lang="ts" setup>
import { InputGroup, InputNumber } from 'ant-design-vue';
import { ref, watch, onMounted } from 'vue';
const props = defineProps({
  value: {
    type: String,
    default: () => '',
  },
  placeholder: {
    type: Array,
    default: () => ['最小值', '最大值'],
  },
});
const emit = defineEmits(['change']);
const handleInput = () => {
  const data = `${min.value ?? 0},${max.value ?? ''}`;
  console.log(data);
  emit('change', data);
};

const min = ref();
const max = ref();
watch(
  () => props.value,
  (e) => {
    if (e) {
      const [minval, maxval] = props.value.split(',');
      min.value = minval;
      max.value = maxval;
    } else {
      min.value = void 0;
      max.value = void 0;
    }
  },
  {
    immediate: true,
  },
);
</script>
<style lang="less" scoped>
.number-between {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
}
::v-deep(.ant-input-number.css-dev-only-do-not-override-mqvs2y) {
  padding: 0 !important;
  min-width: 5px !important;
}
::v-deep(.ant-input-number.css-mqvs2y) {
  padding: 0 !important;
  min-width: 5px !important;
}
</style>
